<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/case/fundList' }">公积金方案</el-breadcrumb-item>
        <el-breadcrumb-item>调基</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer addCasePage">
      <!-- 添加公积金方案表单 -->
      <div class="customform shebaoform">
        <el-form
          :inline="true"
          :model="product"
          :rules="rules"
          label-width="120px"
          label-position="left"
          ref="socialproduct"
        >
          <div class="el-form--inline">
            <el-form-item label="参保地" prop="addrId">
              <el-select
                disabled
                placeholder="请输入字母搜索"
                @change="addrChange"
                v-model="product.addrId"
                filterable
              >
                <el-option
                  v-for="item in addrs"
                  :key="item.id"
                  :label="item.addrName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="公司名称" prop="productName">
              <el-input disabled v-model="product.optrCompName" placeholder="公司名称"></el-input>
            </el-form-item>
            <el-form-item label="公积金账户" disabled prop="accountId">
              <el-select disabled placeholder="请选择公积金账户" v-model="product.accountId" filterable>
                <el-option
                  v-for="item in accounts"
                  :key="item.id"
                  :label="item.account"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="方案名称" prop="productName">
              <el-input disabled v-model="product.productName" placeholder="输入方案名称"></el-input>
            </el-form-item>
            <el-form-item label="户口性质" prop="hukouTypeCodeArr">
              <el-checkbox-group v-model="product.hukouTypeCodeArr">
                <el-checkbox
                  :label="item.dictCode"
                  v-for="(item,index) in types"
                  :key="index"
                >{{item.dictName}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="总合计精确度">
              <DataDictSelect :data-key="40001" :p_value.sync="product.calAccuCode"></DataDictSelect>
            </el-form-item>
            <el-form-item label="单位精确度">
              <DataDictSelect :data-key="40001" :p_value.sync="product.compCalAccuCode"></DataDictSelect>
            </el-form-item>
            <el-form-item label="个人精确度">
              <DataDictSelect :data-key="40001" :p_value.sync="product.empCalAccuCode"></DataDictSelect>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="生效年月" prop="startDate">
              <el-date-picker
                v-model="product.startDate"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="备注">
              <el-input class="long-input" v-model="product.comment" maxlength="255" show-word-limit></el-input>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="状态">
              <el-switch
                v-model="product.used"
                active-color="#ff8b2b"
                inactive-color="#cccccc"
                :active-value="Number(1)"
                inactive-value="Number(0)"
              ></el-switch>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!-- 添加公积金方案表单结束 -->

      <!-- 表格资料 -->
      <div class="zy-form my-table">
        <template>
          <el-table class="my-table" :data="tableData3" style="width: 100%">
            <el-table-column
              align="center"
              type="index"
              :index="indexMethod"
              label="序号"
              width="100"
            ></el-table-column>
            <el-table-column align="center" prop="itemTypeCode" label="险种类别">
              <template slot-scope="scope">
                <span>{{Gloab.dataCode[scope.row.itemTypeCode]}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="maleAgeMin" label="最小年龄"></el-table-column>
            <el-table-column align="center" prop="maleAgeMax" label="男最大年龄"></el-table-column>
            <el-table-column align="center" prop="femaleAgeMax" label="女最大年龄"></el-table-column>
            <el-table-column label="单位精度" align="center">
              <el-table-column label="精度" align="center">
                <template slot-scope="scope">{{Gloab.dataCode[scope.row.compCalAccuCode]}}</template>
              </el-table-column>
              <el-table-column label="基数范围" align="center">
                <template slot-scope="scope">{{scope.row.compBaseMin}}-{{scope.row.compBaseMax}}</template>
              </el-table-column>
              <el-table-column label="比例" align="center">
                <template slot-scope="scope">{{scope.row.compRatio}}</template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="个人精度" align="center">
              <el-table-column label="精度" align="center">
                <template slot-scope="scope">{{Gloab.dataCode[scope.row.empCalAccuCode]}}</template>
              </el-table-column>
              <el-table-column label="基数范围" align="center">
                <template slot-scope="scope">{{scope.row.empBaseMin}}-{{scope.row.empBaseMax}}</template>
              </el-table-column>
              <el-table-column label="比例" align="center">
                <template slot-scope="scope">{{scope.row.empRatio}}</template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" prop="table8" label="收费频率">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top" popper-class="custom-popover">
                  <p>收费规则:{{ scope.row.ruleType }}</p>
                  <div slot="reference" class="name-wrapper">{{ scope.row.ruleType }}</div>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div class="clearfix">
          <el-button class="fr table-add-btn" size="small" @click="editItem">
            <i class="iconfont iconedit"></i> 编辑险种
          </el-button>
        </div>
      </div>
      <!-- 表格资料结束 -->
      <div class="page-form-btn">
        <el-button @click="$router.go(-1)">取消</el-button>
        <el-button type="primary" @click="saveProduct">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
import CompanySelect from "../../components/CompanySelect";
import DataDictSelect from "../../components/DataDictSelect";

export default {
  name: "addCase",
  components: {
    CompanySelect,
    DataDictSelect
  },
  computed: {
    optrCompId() {
      return this.product.optrCompId;
    }
  },
  watch: {
    optrCompId(v1) {
      Http.api
        .get("company/" + v1 + "/account", { params: { type: 1 } })
        .then(res => {
          this.accounts = res.data;
        });
    }
  },
  data() {
    return {
      accounts: [],
      types: [],
      // 公积金表单

      product: {
        optrCompId: "",
        accountId: "",
        addrId: "",
        addrName: "",
        optrCompName: "",
        productName: "",
        hukouTypeCode: "",
        hukouTypeCodeArr: [],
        calAccuCode: "",
        compCalAccuCode: "",
        empCalAccuCode: "",
        startDate: "",
        endDate: "",
        comment: ""
      },
      // 必填项目
      rules: {
        addrId: [
          { required: true, message: "请选择参保地", trigger: "change" }
        ],
        optrCompId: [
          { required: true, message: "请选择服务公司", trigger: "change" }
        ],
        accountId: [
          { required: true, message: "请选择公积金账户", trigger: "change" }
        ],
        productName: [
          { required: true, message: "请输入方案名称", trigger: "blur" }
        ],
        hukouTypeCodeArr: [
          // { validator: checkPwd, trigger: "blur" },
          {
            type: "array",
            required: true,
            message: "请选择一个户口性质",
            trigger: "change"
          }
        ],
        startDate: [
          {
            type: "string",
            required: true,
            message: "请选择生效年月",
            trigger: "change"
          }
        ]
      },
      // 参保地
      addrs: [],

      // 公积金账号
      // 险种列表
      mechanism: ["单位", "个人"],
      tableData3: []
    };
  },
  created() {
    this.getAllAddrs();
    this.getDetail();
    this.getType();
  },
  methods: {
    getType() {
      Http.api.get("dict", { params: { key: 40005 } }).then(res => {
        this.types = res.data;
      });
    },
    getAllAddrs() {
      Http.api
        .get("/addr/allPermission", { params: { permissionType: 1 } })
        .then(res => {
          this.addrs = res.data;
        });
    },
    getDetail() {
      Http.api.get("/case/accfundproduct/" + this.$route.query.id).then(res => {
        this.product = res.data;
        this.product.hukouTypeCodeArr = res.data.hukouTypeCode.split(",");
        console.log(this.product);
        this.tableData3 = res.data.items;
      });
    },
    test: function() {
      Http.api.get("/serverstatus").then(res => {});
    },
    indexMethod(index) {
      return index + 1;
    },
    // 保存
    saveProduct() {
      this.$refs["socialproduct"].validate(v => {
        console.log(this.product);
        if (v) {
          this.product.hukouTypeCode = this.product.hukouTypeCodeArr.join(",");
          Http.api.post("case/acc/product", this.product).then(res => {
            this.$message.success("修改成功");
            this.$router.push({
              path: "/case/fundList",
              query: { productId: res.data.id }
            });
          });
        }
      });
    },
    addrChange(v) {
      console.log(v);
      this.product.addrName = v.addrName;
    },
    //编辑险种
    editItem() {
      this.$router.push({
        path: "/case/editFundInsurance",
        query: { productId: this.$route.query.id }
      });
    }
  }
};
</script>
